<div class="row">
  <div class="col-lg-12">
    <div class="node-badges">
      <div ng-show="node.master">
        <i ng-show="node.current_master" class="fa fa-fw fa-star" title="current master"></i>
        <i ng-show="!node.current_master" class="fa fa-fw fa-star-o" title="master eligible"></i>
      </div>
      <div ng-show="node.data">
        <i class="fa fa-fw fa-hdd-o" title="data node"></i>
      </div>
    </div>
    <div class="node-info">
      <div class="dropdown">
        <a data-toggle="dropdown" href="#" target="_self" class="cluster-map-header-index-name">
          <i class="fa fa-fw fa-caret-down pull-right"></i>
          <span class="cluster-map-header-index-name">{{node.name}} </span>
        </a>
        <ul class="dropdown-menu index-dropdown" role="menu">
          <li role="presentation">
            <a data-toggle="modal" class="cluster-map-header-index-action" ng-click="showNodeStats(node.id)">
              <i class="fa fa-fw fa-info-circle index-menu-icon"></i> view node stats
            </a>
          </li>
        </ul>
      </div>
      <div>
        <div>
          <span class="cluster-map-node-detail">{{node.host}}</span>
        </div>
        <div ng-show="expandedView">
          <span class="cluster-map-node-detail">{{node.transportAddress}}</span>
        </div>
        <div ng-show="expandedView">
          <span class="node-label label-primary">JVM: {{node.jvmVersion}}</span>
          <span class="node-label label-primary">ES: {{node.elasticVersion}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 cluster-map-header-index-name">
    <div class="col-xs-3 node-progress-bar" title="used: {{node.heap_used}}&#013;max: {{node.heap_max}}">
      <span class="cluster-map-node-detail">heap</span>

      <div class="progress node-progress">
        <div class="progress-bar" ng-class="{'progress-bar-danger': node.heap_used_percent > 75}" role="progressbar" aria-valuenow="{{node.heap_used_percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{node.heap_used_percent}}%;">
        </div>
      </div>
    </div>
    <div class="col-xs-3 node-progress-bar" title="free: {{node.disk_free_in_bytes | bytes}}&#013;total: {{node.disk_total_in_bytes | bytes}}">
      <span class="cluster-map-node-detail">disk</span>

      <div class="progress node-progress">
        <div class="progress-bar" ng-class="{'progress-bar-danger': node.disk_used_percent > 75}" role="progressbar" aria-valuenow="{{node.disk_used_percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{node.disk_used_percent}}%;">
        </div>
      </div>
    </div>
    <div class="col-xs-3 node-progress-bar" title="process: {{node.cpu}}%">
      <span class="cluster-map-node-detail">cpu</span>

      <div class="progress node-progress">
        <div class="progress-bar" ng-class="{'progress-bar-danger': node.cpu > 75}" role="progressbar" aria-valuenow="{{node.cpu}}" aria-valuemin="0" aria-valuemax="100" style="width: {{node.cpu}}%">
        </div>
      </div>
    </div>
    <div class="col-xs-3 node-progress-bar" title="1min avg: {{node.load_average | number:2}}">
      <span class="cluster-map-node-detail">load</span>

      <div class="progress node-progress">
        <div class="progress-bar" ng-class="{'progress-bar-danger': (node.load_average / node.availableProcessors) > 0.75}" role="progressbar" aria-valuenow="{{node.load_average}}" aria-valuemin="0" aria-valuemax="{{node.availableProcessors}}" style="width: {{(node.load_average / node.availableProcessors) * 100}}%;">
        </div>
      </div>
    </div>
  </div>
</div>
